<template>
    <c-list-template :search="false" title="角色管理" :operation="true">
        <template slot="operation">
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd()">新增</el-button>
        </template>

        <template slot="list">
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" v-loading="loading">
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
                <el-table-column align="center" prop="code" :label="$t('role.roleCode')"></el-table-column>
                <el-table-column prop="name" align="center" :label="$t('role.roleName')"></el-table-column>
                <el-table-column align="center" prop="timeCreate" :label="$t('global.timeOfCreation')">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeCreate | dateYMDHMSFormat }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" :label="$t('role.status')">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 1">{{ $t("role.normal") }}</span>
                        <span v-if="scope.row.status === 2">{{ $t("role.locked") }}</span>
                        <span v-if="scope.row.status === 3">{{ $t("global.delete") }}</span>
                        <span v-if="scope.row.status === 4">{{ $t("role.illegally") }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" :label="$t('role.operation')">
                    <template slot-scope="scope" v-if="scope.row.code != 'role_login'">
                        <el-link type="primary" class="mr-lg" @click="goAuth(scope.row)" :title="$t('role.authorizationMenu')">授权</el-link>
                        <el-link type="primary" @click="deleteRole(scope.row.id)" :title="$t('global.delete')">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :total="total" layout="total, prev, pager, next, jumper" :current-page.sync="page.current" @current-change="handleCurrentChange" class="paging"></el-pagination>
        </template>
        <c-role-form ref="cRoleForm" />
    </c-list-template>
</template>

<script>
import cRoleForm from "./components/c-role-form.vue";
export default {
    components: {
        cRoleForm
    },
    data () {
        return {
            tableData: [],
            page: {
                current: 1,
                size: 10
            },
            total: 0,
            type: 0,
            loading: false
        };
    },
    mounted () {
        this.getList();
    },
    methods: {
        handleAdd () {
            this.$refs.cRoleForm.handleOpen()
        },
        handleCurrentChange () {
            this.getList();
        },
        getList () {
            this.loading = true
            this.$get({
                url:
                    "/role/" + this.type + "/" + this.page.current + "/" + this.page.size
            }).then(res => {
                this.tableData = res.records;
                this.total = res.total;
                this.loading = false
            });
        },
        deleteRole (id) {
            this.$mixin.methods.showConfirm(this.$t("role.delWarn"), () => {
                this.comfirmDelete(id);
            });
        },
        comfirmDelete (id) {
            this.$ajax({
                method: "DELETE",
                url: "/role/" + id
            }).then(res => {
                if (res.data.success) {
                    this.$message({
                        type: "success",
                        message: res.data.resultInfo
                    });
                    this.getList();
                } else {
                    this.$message({
                        type: "warning",
                        message: res.data.resultInfo
                    });
                }
            });
        },
        goAuth (val) {
            this.$router.push({
                name: "authMenu"
            });
            sessionStorage.setItem("ids", JSON.stringify(val));
        }
    }
};
</script>
<style scoped lang="scss"></style>
